import React, { Component } from 'react';
import {Transition} from 'react-transition-group';
// import { CSSTransition } from 'react-transition-group'

const duration = 300;

const defaultStyle = {
  transition: `all ${duration}ms ease-in-out`,
  // opacity: 0,
  transform: `scale(0)`,
  width: 100,
  height: 100,
  background: 'orange',
  position: 'fixed',
  left: 0
};

const transitionStyles = {
  entering: {opacity: 1, left: 10, transform: 'scale(1)'},
  entered: {opacity: 1, left: 10, transform: 'scale(1)'},
  exiting: {opacity: 0, left: 0},
  exited: {opacity: 0}
}

const Fade = (props) => (
  <Transition in={props.show} timeout={duration}>
    {
      (state) => (
        <div style={{...defaultStyle, ...transitionStyles[state]}}>
          fade
        </div>
      )
    }
  </Transition>
)

export default Fade;
